<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.Date" %>
<%@ page info="This in index.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜品分类</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>
<!-- 表格数据 -->
<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- 填写表单 -->
<form class="layui-form" id="addform" style="display:none">
    <div class="layui-form-item">
        <label class="layui-form-label">菜品分类</label>
        <div class="layui-input-block">
            <input type="text" name="typename" required lay-verify="required" placeholder="请输入菜品分类"
                   autocomplete="on" class="layui-input" id="typename" style="width:300px">
        </div>
    </div>
</form>






<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <!-- <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> -->
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../js/jquery-3.6.0.min.js" charset="utf-8"></script>
<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function() {
        var table = layui.table;

        table.render({
            elem: '#test',
            url: 'http://localhost/foodtype/pagelist',
            toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,
            // defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            // 	title: '提示',
            // 	layEvent: 'LAYTABLE_TIPS',
            // 	icon: 'layui-icon-tips'
            // }],
            width: 1300,
            height: 540,
            title: '菜品分类',
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'id',
                    title: 'ID',
                    width: 80,
                    fixed: 'left',
                    unresize: true,
                    sort: true
                }, {
                    field: 'typename',
                    title: '菜品类型',
                    width: 1000,

                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 150
                }]
            ],
            initSort: {
                field: 'id' //排序字段，对应 cols 设定的各字段名
                ,
                type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            },
            page: true
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;

                case 'add':
                    layer.open({
                        type: 1,
                        // area: ['500px', '600px'],
                        offset: ['40px', '400px'],
                        title: '添加数据',
                        content: $("#addform"),
                        shade: 0,
                        btn: ['提交', '重置'],
                        zIndex: 9999999,
                        moveOut: true,
                        btn1: function(index, layero) {
                            var typename = $("#typename").val();
                            if (typename != "") {
                                $.ajax({
                                    //请求方式
                                    type: "POST",
                                    //请求的媒体类型
                                    // contentType: "application/json;charset=UTF-8",
                                    //请求地址
                                    url: "http://localhost/foodtype/add",
                                    //数据，json字符串
                                    data: {
                                        typename: typename
                                    },
                                    // data : JSON.stringify(list),
                                    //请求成功
                                    success: function(result) {
                                        // 获取当前页码
                                        let currpage = $('.layui-laypage-em')
                                            .next().text();
                                        var data = $.parseJSON(result);
                                        if (data.code == 0) {
                                            $("#addform")[0].reset();
                                            table.reload("test", {
                                                page: {
                                                    curr: currpage
                                                }
                                            });
                                            layer.closeAll();
                                        } else {
                                            layer.msg(data.msg);
                                            layer.closeAll();
                                        }

                                    }
                                });
                            } else {
                                layer.msg("你填空的，玩个锤子!!!");
                            }
                        },
                        btn2: function(index, layero) {
                            $("#addform")[0].reset();
                            return false;
                        },
                        cancel: function(layero, index) {
                            layer.closeAll();
                            $("#addform")[0].reset();
                        }

                    });

                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    // console.log(data);
                    // console.log(index);
                    $.ajax({
                        //请求方式
                        type: "POST",
                        //请求的媒体类型
                        // contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url: "http://localhost/foodtype/delete",
                        //数据，json字符串
                        data: data,
                        // data : JSON.stringify(list),
                        //请求成功
                        success: function(result) {
                            var data = $.parseJSON(result);
                            if (data.code == 0) {
                                table.reload("test", {
                                    page: {
                                        curr: 1
                                    }
                                });
                                layer.close(index);
                            } else {
                                layer.msg(data.msg);
                                layer.close(index);
                            }

                        }
                    });
                    // layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 1,
                    // area: ['500px', '600px'],
                    offset: ['40px', '400px'],
                    title: '修改数据',
                    content: $("#addform"),
                    shade: 0,
                    btn: ['修改'],
                    zIndex: 9999999,
                    moveOut: true,
                    success: function(layero, index){
                        $("#typename").val(data.typename);
                    },
                    btn1: function(index, layero) {
                        var typename = $("#typename").val();
                        if (typename != "") {
                            $.ajax({
                                //请求方式
                                type: "POST",
                                //请求的媒体类型
                                // contentType: "application/json;charset=UTF-8",
                                //请求地址
                                url: "http://localhost/foodtype/update",
                                //数据，json字符串
                                data: {
                                    id: data.id,
                                    typename: typename
                                },
                                // data : JSON.stringify(list),
                                //请求成功
                                success: function(result) {
                                    // 获取当前页码
                                    let currpage = $('.layui-laypage-em').next()
                                        .text();
                                    var data = $.parseJSON(result);
                                    if (data.code == 0) {
                                        $("#addform")[0].reset();
                                        table.reload("test", {
                                            page: {
                                                curr: currpage
                                            }
                                        });
                                        layer.closeAll();
                                    } else {
                                        layer.msg(data.msg);
                                        layer.closeAll();
                                    }

                                }
                            });
                        }else{
                            layer.msg("你填空的，玩个锤子!!!");
                        }
                    },
                    cancel: function(layero, index) {
                        layer.closeAll();
                        $("#addform")[0].reset();
                    }

                });
            }
        });
    });
</script>

</body>
</html>

